<template>
  <div :style="defaultStyle" :class="isActiveClass" class="content-box">
    <div :style="contentStyle">
      <el-carousel :height="carouselHeight + 'px'" indicator-position="none">
        <el-carousel-item v-for="(item, index) in contentData.default_sub_list" :key="index">
          <img
            :src="item.fileUrl"
            :style="{ borderRadius: contentStyle.borderRadius }"
            @load="onImageLoad(index, $event)"
            class="img-style"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default() {
        return {}
      }
    },
    isActiveClass: {
      type: String
    }
  })

  const carouselHeight = ref(136)

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom,
      marginBottom: s.marginBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      backgroundColor: s.backgroundColor
    }
  })

  function onImageLoad(index: number, event: Event) {
    if (index === 0) {
      const img = event.target as HTMLImageElement
      const naturalWidth = img.naturalWidth
      const naturalHeight = img.naturalHeight

      const displayWidth = 375
      const scale = displayWidth / naturalWidth
      const scaledHeight = Math.round(naturalHeight * scale)

      carouselHeight.value = scaledHeight
    }
  }

  watch(
    () => props.contentData.default_sub_list,
    (val) => {
      console.log(val, 6)
    }
  )
</script>

<style scoped lang="scss">
  .active-component {
    border: 1px solid var(--el-color-primary);
  }

  .content-box {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  .img-style {
    width: 100%;
    height: 100%;
    text-align: center;
    object-fit: cover;
  }
</style>
